import React, { useEffect, useState } from "react";
import TableList from "./component/TableList";
import http from "../../utils/request";
import { Modal } from "antd";
import SearchForm from "./component/SearchForm";
import FormBox from "./component/FormBox";
import { useForm } from "antd/es/form/Form";
function Home() {
  const [form] = useForm();
  const [list, setList] = useState([]);
  const [job, setJob] = useState("");
  const [name, setName] = useState("");
  const [status, setstatus] = useState("");
  const [start_time, setstart_time] = useState("");
  const [end_time, setend_time] = useState("");
  const [total, setTotal] = useState(0);
  const [title, setTitle] = useState("");
  const [pageSize, setpageSize] = useState(6);
  const [page, setPage] = useState(1);
  const [isModalOpen, setisModalOpen] = useState(false);

  const getlist = async () => {
    const res = await http.get("/getSchemaList", {
      params: {
        job,
        name,
        status,
        start_time,
        end_time,
        pageSize: pageSize,
        pageNum: page,
      },
    });
    console.log("表格", res);
    const { list, code, total } = res.data;
    if (code == 1) {
      setList(list);
      setTotal(total);
    }
  };

  const delFn = async (record) => {
    Modal.confirm({
      title: "确定删除?",
      onOk: async () => {
        const res = await http.delete("/delSchema", {
          params: { id: record.id },
        });
        console.log(res, "删除");
        if (res.data.code == 1) {
          getlist();
        }
      },
    });
  };
  const onSearch = (value) => {
    setJob(value.job);
    setName(value.name);
    setstatus(value.status);
    setstart_time(value.start_time);
    setend_time(value.end_time);
  };

  // 新增编辑
  const editFn = (record) => {
    setisModalOpen(true);
    setTitle("编辑");
    form.setFieldsValue(record);
  };
  const addFn = () => {
    setisModalOpen(true);
    setTitle("新增");
  };
  const handleCancel = () => {
    setisModalOpen(false);
    form.resetFields();
  };
  // 提交按钮
  const onSubFn = async (value) => {
    if (value.id) {
      const res = await http.put("/editSchema", value);
      console.log("编辑", res);
      if (res.data.code == 1) {
        getlist();
        handleCancel();
      }
    } else {
      const response = await http.post("/addSchema", value);
      console.log("新增", response);
      if (response.data.code == 1) {
        getlist();
        handleCancel();
      }
    }
  };
  const onChange = (page, pageSize) => {
    // alert(1)
    setPage(page);
    setpageSize(pageSize);
  };
  useEffect(() => {
    getlist();
  }, [job, name, status, start_time, end_time, pageSize, page]);
  return (
    <div>
      <SearchForm onSearch={onSearch} />
      <TableList
        list={list}
        delFn={delFn}
        editFn={editFn}
        addFn={addFn}
        pageSize={pageSize}
        page={page}
        total={total}
        onChange={onChange}
      />
      ;
      <FormBox
        title={title}
        isModalOpen={isModalOpen}
        handleCancel={handleCancel}
        onSubFn={onSubFn}
        form={form}
      />
    </div>
  );
}

export default Home;
